<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ref</title>
</head>
<body>
  <div id="app"></div>
  <script src="js/vue.js"></script>
  <script>
    /*
      reactive: 让引用类型的数据具备响应式
    */
    const app = Vue.createApp({
      setup(props, context){
         // 1. 引入reactive
         const {reactive} = Vue;
         // proxy: {name: '张三', sex: '男'} --> proxy({name: '张三', sex: '男'})
         let pObj = reactive({name: '张三', sex: '男'});
         let pArr = reactive(['Vue', 'React']);

         setTimeout(()=>{
           pObj.name = '小撩';
           pObj.sex = '女';
         }, 2000);

         return {
           pObj,
           pArr
         }
      },
      template: `
        <div>
           <h1>姓名: {{ pObj.name }}, 性别: {{pObj.sex}}</h1>
           <h2>{{pArr}}</h2>
        </div>
      `
    }).mount('#app');
  </script>
</body>
</html>
